/* 响应式断点和工具类 */

/* 小屏幕（手机） */
@media (max-width: 480px) {
  .container {
    padding: 0 10px;
  }
  
  .grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .card {
    padding: 15px;
  }
  
  .btn {
    padding: 8px 16px;
    font-size: 0.9em;
  }
  
  h1 {
    font-size: 1.5em;
  }
  
  h2 {
    font-size: 1.3em;
  }
  
  h3 {
    font-size: 1.1em;
  }
  
  p {
    font-size: 0.9em;
  }
}

/* 中等屏幕（平板） */
@media (min-width: 481px) and (max-width: 768px) {
  .container {
    padding: 0 15px;
  }
  
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
  }
  
  .card {
    padding: 20px;
  }
  
  .btn {
    padding: 10px 20px;
    font-size: 1em;
  }
  
  h1 {
    font-size: 1.8em;
  }
  
  h2 {
    font-size: 1.5em;
  }
  
  h3 {
    font-size: 1.2em;
  }
  
  p {
    font-size: 1em;
  }
}

/* 大屏幕（桌面） */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    padding: 0 20px;
  }
  
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
  }
  
  .card {
    padding: 25px;
  }
}

/* 超大屏幕 */
@media (min-width: 1025px) {
  .container {
    padding: 0 25px;
  }
  
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
  }
  
  .card {
    padding: 30px;
  }
}

/* 工具类 */
.hidden-sm {
  display: block;
}

.hidden-md {
  display: block;
}

.hidden-lg {
  display: block;
}

.visible-sm {
  display: none;
}

.visible-md {
  display: none;
}

.visible-lg {
  display: none;
}

/* 小屏幕工具类 */
@media (max-width: 768px) {
  .hidden-sm {
    display: none !important;
  }
  
  .visible-sm {
    display: block !important;
  }
}

/* 中等屏幕工具类 */
@media (min-width: 769px) and (max-width: 1024px) {
  .hidden-md {
    display: none !important;
  }
  
  .visible-md {
    display: block !important;
  }
}

/* 大屏幕工具类 */
@media (min-width: 1025px) {
  .hidden-lg {
    display: none !important;
  }
  
  .visible-lg {
    display: block !important;
  }
}

/* Flexbox 工具类 */
.flex-column-sm {
  flex-direction: row;
}

.flex-column-md {
  flex-direction: row;
}

@media (max-width: 768px) {
  .flex-column-sm {
    flex-direction: column !important;
  }
}

@media (max-width: 1024px) {
  .flex-column-md {
    flex-direction: column !important;
  }
}

/* 文本对齐工具类 */
.text-center-sm {
  text-align: left;
}

@media (max-width: 768px) {
  .text-center-sm {
    text-align: center !important;
  }
}

/* 间距工具类 */
.m-0-sm {
  margin: 0;
}

.p-0-sm {
  padding: 0;
}

@media (max-width: 768px) {
  .m-0-sm {
    margin: 0 !important;
  }
  
  .p-0-sm {
    padding: 0 !important;
  }
}